<template>
  <div class="paySuccess">
    <h3>支付失败</h3>
    <img src="../../../assets/img/pay/支付失败.png" />
    <p>支付失败, 将于{{ count }}秒后自动跳转...</p>
    <span></span>
    <button @click="fastSkip">立即跳转</button>
  </div>
</template>
<script>
const TIME_COUNT = 10;
export default {
  created() {
    this.send();
  },
  data() {
    return {
      count: "", // 初始化次数
      timer: null
    };
  },
  methods: {
    send() {
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer); // 清除定时器
            this.$router.push("/profile");
            this.timer = null;
          }
        }, 1000);
      }
    },
    fastSkip() {
      clearInterval(this.timer);
      this.$router.push("/profile");
    }
  }
};
</script>
<style scoped>
h3,
p {
  margin: 0;
  padding: 0;
}
img {
  display: block;
}
h3 {
  margin: 67px auto;
  text-align: center;
  height: 24px;
  line-height: 24px;
  font-family: MicrosoftYaHei;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #000000;
}
img {
  margin: 127px auto;
  width: 100px;
  height: 100px;
}
p {
  margin: 20px auto;
  text-align: center;
  height: 20px;
  line-height: 20px;
  font-family: MicrosoftYaHei;
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
}

button {
  border: 0;
  display: block;
  width: 90%;
  height: 50px;
  background-color: #f5222d;
  border-radius: 8px;
  font-family: MicrosoftYaHei;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 3px;
  color: #ffffff;
  margin: 100px 0 0 30px;
}
</style>
